<template>
  <div class="store-basics-edit-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{title}}</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="一级销区" prop="rp02" label-width="80px">
              <el-input v-model="form.rp02" placeholder="请输入一级销区" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="一级销区名称" prop="rp02name" label-width="140px">
              <el-input v-model="form.rp02name" placeholder="请输入一级销区名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级销区" prop="rp03">
              <el-input v-model="form.rp03" placeholder="请输入二级销区" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级销区名称" prop="rp03name">
              <el-input v-model="form.rp03name" placeholder="请输入二级销区名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="品牌" prop="brand" label-width="80px">
              <el-input v-model="form.brand" placeholder="请输入品牌" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="品牌代码" prop="brandCode">
              <el-input v-model="form.brandCode" placeholder="请输入品牌代码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否有效">
              <el-select v-model="form.isActive" placeholder="请选择是否有效">
                <el-option v-for="dict in isActiveOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="门店名称" prop="storeName" label-width="80px">
              <el-input v-model="form.storeName" placeholder="请输入门店名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="门店类型" prop="storeType" label-width="140px">
              <el-input v-model="form.storeType" placeholder="请输入门店类型" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="门店类型代码" prop="storeTypeCode">
              <el-input v-model="form.storeTypeCode" placeholder="请输入门店类型代码" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="副店面代码" prop="storeA8">
              <el-input v-model="form.storeA8" placeholder="请输入副店面代码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="门店经营模式" prop="manageMode">
              <el-input v-model="form.manageMode" placeholder="请输入门店经营模式" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="门店经营模式代码" prop="manageModeCode" label-width="140px">
              <el-input v-model="form.manageModeCode" placeholder="请输入门店经营模式代码" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="营业状态" prop="storeStatus">
              <el-input v-model="form.storeStatus" placeholder="请输入营业状态" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="营业状态代码" prop="storeStatusCode">
              <el-input v-model="form.storeStatusCode" placeholder="请输入营业状态代码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude" label-width="80px">
              <el-input ref="lngId" disabled="disabled" v-model="form.longitude" placeholder="请在地图上选择门店位置, 回填经度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude">
              <el-input ref="latId" disabled="disabled" v-model="form.latitude" placeholder="请在地图上选择门店位置, 回填纬度" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="省" prop="province" label-width="80px">
              <el-input ref="provinceId" disabled="disabled" v-model="form.province" placeholder="请在地图上选择门店位置, 回填省份" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="市" prop="city">
              <el-input ref="cityId" disabled="disabled" v-model="form.city" placeholder="请在地图上选择门店位置, 回填地市" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="区" prop="area">
              <el-input ref="areaId" disabled="disabled" v-model="form.area" placeholder="请在地图上选择门店位置, 回填区域" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="街道" prop="street" label-width="80px">
              <el-input ref="streetId" disabled="disabled" v-model="form.street" placeholder="请在地图上选择门店位置, 回填街道" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门店地址" prop="storeAddress">
              <el-input v-model="form.storeAddress" disabled="disabled" placeholder="请输入门店地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-form-item class="form-btn-bar">
            <el-button type="primary" @click="submitForm">保 存</el-button>
          </el-form-item>
        </el-row>
        <!-- 地图 -->
        <div class="map" id="map">
          <!-- 搜索框 -->
          <div class="input-group search">
            <input type="text" class="form-control getAddress" id="keyword" placeholder="请输入地址" aria-describedby="basic-addon2"
              @keydown="keyDown($event)">
            <button class="btn searchBtn" type="submit" @click="searchKeyword()">查找</button>
          </div>
          <!-- 提示语 -->
          <div class="prompt">
            小提示：右击获取地址
          </div>
          <!-- 地图 -->
          <div class="mappc" id="containerMap"></div>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import requestCrm from '@/utils/requestCrm'
  import {
    getStoreBasics,
    addStoreBasics,
    updateStoreBasics
  } from "@/api/xdstore/storeBasics";
  import Editor from '@/components/Editor';

  import {
    TMap
  } from '../../../components/Map/TMap.js';

  import { Loading } from 'element-ui';

  export default {
    name: "storeBasicsEdit",
    components: {
      Editor
    },
    data() {
      return {
        title: '',
        // 是否有效字典
        isActiveOptions: [],
        form: {
          rp02: '',
          rp02name: '',
          rp03: '',
          rp03name: '',
          storeA8: '',
          isActive: '1',
          storeName: '',
          storeType: '',
          storeTypeCode: '',
          storeStatus: '',
          storeStatusCode: '',
          manageMode: '',
          manageModeCode: '',
          brand: '',
          brandCode: '',
          storeAddress: '',
          longitude: '',
          latitude: '',
          province: '',
          city: '',
          area: '',
          street: ''
        },
        rules: {
          rp02: [{
            required: true,
            message: '请输入一级销区',
            trigger: 'blur'
          }],
          rp02name: [{
            required: true,
            message: '请输入一级销区名称',
            trigger: 'blur'
          }],
          rp03: [{
            required: true,
            message: '请输入二级销区',
            trigger: 'blur'
          }],
          rp03name: [{
            required: true,
            message: '请输入二级销区名称',
            trigger: 'blur'
          }],
          brand: [{
            required: true,
            message: '请输入品牌',
            trigger: 'blur'
          }],
          brandCode: [{
            required: true,
            message: '请输入品牌代码',
            trigger: 'blur'
          }],
          storeName: [{
            required: true,
            message: '请输入门店名称',
            trigger: 'blur'
          }],
          storeAddress: [{
            required: true,
            message: '请输入门店地址',
            trigger: 'blur'
          }],
          storeType: [{
            required: true,
            message: '请输入门店类型',
            trigger: 'blur'
          }],
          storeTypeCode: [{
            required: true,
            message: '请输入门店类型代码',
            trigger: 'blur'
          }],
          storeA8: [{
            required: true,
            message: '请输入副店面代码',
            trigger: 'blur'
          }],
          storeStatus: [{
            required: true,
            message: '请输入营业状态',
            trigger: 'blur'
          }],
          storeStatusCode: [{
            required: true,
            message: '请输入营业状态代码',
            trigger: 'blur'
          }],
          manageMode: [{
            required: true,
            message: '请输入门店经营模式',
            trigger: 'blur'
          }],
          manageModeCode: [{
            required: true,
            message: '请输入门店经营模式代码',
            trigger: 'blur'
          }],
          isActive: [{
            required: true,
            message: '请选择是否有效',
            trigger: 'blur'
          }],
          longitude: [{
            required: true,
            message: '请在地图上选择门店位置, 回填经度',
            trigger: 'blur'
          }],
          latitude: [{
            required: true,
            message: '请在地图上选择门店位置, 回填纬度',
            trigger: 'blur'
          }],

          province: [{
            required: true,
            message: '请在地图上选择门店位置, 回填省份',
            trigger: 'blur'
          }],
          city: [{
            required: true,
            message: '请在地图上选择门店位置, 回填地市',
            trigger: 'blur'
          }],
          area: [{
            required: true,
            message: '请在地图上选择门店位置, 回填区域',
            trigger: 'blur'
          }],
          street: [{
            required: true,
            message: '请在地图上选择门店位置, 回填街道',
            trigger: 'blur'
          }]
        },
        markersArray: [],
        town: '',
        street: '',
        streetNumber: '',
        addressComponents1: '', // 完整地址
        geocoder: null,
        geocoder1: null,
        loading: false,
        myLoadingObj: null
      }
    },
    created() {
      const that = this;
      that.loading = true;
      console.log('获取到this.$route.params.id:' + that.$route.params.id);
      that.getStoreBasicsInfo(that.$route.params.id, function() {
        that.loading = false;
        that.getDicts("is_active").then(response => {
          that.isActiveOptions = response.data;
          that.form.isActive = that.isActiveOptions[0].dictValue;
        });
      });
    },
    mounted() {
      const that = this;
      TMap().then(qq => {
        that.startLoading();
        setTimeout(function() {
          that.endLoading();
          // 初始化地图
          const initLat = that.form.latitude ? Number(that.form.latitude) : 38.4230;
          const initLong = that.form.longitude ? Number(that.form.longitude) : 104.2115;
          var center = new qq.maps.LatLng(initLat, initLong);
          let initZoom = 4;
          if (that.form.latitude && (that.title === '修改门店基础信息')) {
            initZoom = 30;
          }
          const myOptions = {
            zoom: initZoom,
            center: center,
            mapTypeId: qq.maps.MapTypeId.ROADMAP,
            //启用平移控件
            panControl: false,
            //启用缩放控件
            zoomControl: false,
            //设置控件的地图类型和位置
            mapTypeControlOptions: {
              //设置控件的地图类型ID，ROADMAP显示普通街道地图，SATELLITE显示卫星图像，              HYBRID  显示卫星图像上的主要街道透明层
              mapTypeIds: [],
              //设置控件位置相对上方中间位置对齐
              position: qq.maps.ControlPosition.TOP_CENTER
            }
          }
          const map = new qq.maps.Map(document.getElementById("containerMap"), myOptions)
          that.map = map
          // 监听地图单击事件：删除覆盖物
          qq.maps.event.addListener(map, 'click', function(event) {
            that.clearOverlays(that.markersArray)
          })

          const info = new qq.maps.InfoWindow({
            map: map
          })

          if (that.form.latitude && (that.title === '修改门店基础信息')) {
            // 图标
            const marker = new qq.maps.Marker({
              map: map,
              position: center
            });
            that.markersArray.push(marker);
            // 提示框
            // info.open();
            // info.setContent('<div style="text-align:center;white-space:nowrap;' + '">当前位置</div>');
            // info.setPosition(marker.getPosition());

            qq.maps.event.addListener(
              marker,
              'click',
              function(evt) {
                console.log('点击了图标，隐藏图标');
                that.clearOverlays(that.markersArray);
              });
          }

          // 地址和经纬度之间进行转换服务
          // 地址解析 Geocoder
          that.geocoder = new qq.maps.Geocoder({
            //设置服务请求成功的回调函数
            complete: function(pres) {
              // that.wxGetTxMapByLatLng(pres.detail.location.lat, pres.detail.location.lng, (res)=>{
              //   let result = res.result
              //   map.setCenter(new qq.maps.LatLng(result.location.lat, result.location.lng));
              //   /*获取地址*/
              //   /*省*/
              //   const province = result.address_component.province == undefined ? "" : result.address_component.province;
              //   /*市*/
              //   const city = result.address_component.city == undefined ? "" : result.address_component.city;
              //   /*区*/
              //   const area = result.address_component.district == undefined ? "" : result.address_component.district;
              //   /*街道*/
              //   that.town = result.address_component.town == undefined ? "" : result.address_component.town;
              //   /*具体*/
              //   that.street = result.address_component.street == undefined ? "" : result.address_component.street;
              //   that.streetNumber = result.address_component.streetNumber == undefined ? "" : result.address_component.streetNumber;
              //   const street = that.town + that.street + that.streetNumber;

              //   const addressComponents = province + city + area + street;

              //   /*调整视图*/
              //   map.zoomTo(30);
              //   // that.markersArray.push(marker);
              //   that.setMapData(null, null, province, city, area, street, addressComponents, function() {
              //     console.log('地址解析 Geocoder:');
              //     console.log(that.form);
              //     that.form.province = province;
              //     that.form.city = city;
              //     that.form.area = area;
              //     that.form.street = street;
              //     that.form.storeAddress = addressComponents;
              //     that.$refs.provinceId.focus();
              //     that.$refs.cityId.focus();
              //     that.$refs.areaId.focus();
              //     that.$refs.streetId.focus();
              //   });
              // })
              // console.log(result)
              // map.setCenter(result.detail.location);
              // /*获取地址*/
              // /*省*/
              // const province = result.detail.addressComponents.province == undefined ? "" : result.detail
              //   .addressComponents
              //   .province;
              // /*市*/
              // const city = result.detail.addressComponents.city == undefined ? "" : result.detail.addressComponents
              //   .city;
              // /*区*/
              // const area = result.detail.addressComponents.district == undefined ? "" : result.detail.addressComponents
              //   .district;
              // /*街道*/
              // that.town = result.detail.addressComponents.town == undefined ? "" : result.detail.addressComponents
              //   .town;
              // /*具体*/
              // that.street = result.detail.addressComponents.street == undefined ? "" : result.detail.addressComponents
              //   .street;
              // that.streetNumber = result.detail.addressComponents.streetNumber == undefined ? "" : result
              //   .detail
              //   .addressComponents.streetNumber;
              // const street = that.town + that.street + that.streetNumber;

              // const addressComponents = province + city + area + street;

              // // 图标
              // // const marker = new qq.maps.Marker({
              // //   map: map,
              // //   position: result.detail.location
              // // });
              // // 提示框
              // // info.open();
              // // info.setContent('<div style="text-align:center;white-space:nowrap;' + '">' + addressComponents +
              // //   '</div>');
              // // info.setPosition(marker.getPosition());

              // /*调整视图*/
              // map.zoomTo(30);
              // // that.markersArray.push(marker);
              // that.setMapData(null, null, province, city, area, street, addressComponents, function() {
              //   // qq.maps.event.addListener(
              //   //   marker,
              //   //   'click',
              //   //   function(evt) {
              //   //     console.log('点击了图标，隐藏图标');
              //   //     that.clearOverlays(that.markersArray);
              //   //   });
              //   console.log('地址解析 Geocoder:');
              //   console.log(that.form);
              //   that.form.province = province;
              //   that.form.city = city;
              //   that.form.area = area;
              //   that.form.street = street;
              //   that.form.storeAddress = addressComponents;
              //   that.$refs.provinceId.focus();
              //   that.$refs.cityId.focus();
              //   that.$refs.areaId.focus();
              //   that.$refs.streetId.focus();
              // });
            },
            //若服务请求失败，则运行以下函数
            error: function() {
              alert("出错了，请输入正确的地址！！！");
            }
          })
          //地址和经纬度之间进行转换服务，不展示在表单中
          // that.geocoder1 = new qq.maps.Geocoder({
          //   //设置服务请求成功的回调函数
          //   complete: function(result) {
          //     map.setCenter(result.detail.location);
          //     /*获取地址*/
          //     /*省*/
          //     const province1 = result.detail.addressComponents.province == undefined ? "" : result.detail
          //       .addressComponents
          //       .province;
          //     /*市*/
          //     const city1 = result.detail.addressComponents.city == undefined ? "" : result.detail.addressComponents
          //       .city;
          //     /*区*/
          //     const area1 = result.detail.addressComponents.district == undefined ? "" : result.detail.addressComponents
          //       .district;
          //     /*街道*/
          //     that.town = result.detail.addressComponents.town == undefined ? "" : result.detail.addressComponents
          //       .town;
          //     /*具体*/
          //     that.street = result.detail.addressComponents.street == undefined ? "" : result.detail.addressComponents
          //       .street;
          //     that.streetNumber = result.detail.addressComponents.streetNumber == undefined ? "" : result
          //       .detail
          //       .addressComponents.streetNumber;
          //     const street1 = that.town + that.street + that.streetNumber;

          //     const addressComponents1 = province1 + city1 + area1 + street1;
          //     var marker = new qq.maps.Marker({
          //       map: map,
          //       position: result.detail.location
          //     });
          //     info.open();
          //     info.setContent('<div style="text-align:center;white-space:nowrap;' + '">' +
          //       addressComponents1 +
          //       '</div>');
          //     info.setPosition(marker.getPosition());

          //     /*调整视图*/
          //     map.zoomTo(30);
          //     that.markersArray.push(marker);

          //     that.setMapData(null, null, province1, city1, area1, street1, addressComponents1, function() {
          //       qq.maps.event.addListener(
          //         marker,
          //         'click',
          //         function(evt) {
          //           console.log('点击了图标，隐藏图标');
          //           that.clearOverlays(that.markersArray);
          //         });
          //       that.form.province = province1;
          //       that.form.city = city1;
          //       that.form.area = area1;
          //       that.form.street = street1;
          //       that.form.storeAddress = addressComponents1;
          //       that.$refs.provinceId.focus();
          //       that.$refs.cityId.focus();
          //       that.$refs.areaId.focus();
          //       that.$refs.streetId.focus();
          //     });
          //   },
          //   //若服务请求失败，则运行以下函数
          //   error: function() {
          //     alert("出错了，请输入正确的地址！！！");
          //   }
          // });
          /*右击显示遮盖物，单击覆盖物消失*/
          qq.maps.event.addListener(map, 'rightclick', function(event) {
            const longitudeR = event.latLng.getLng();
            const latitudeR = event.latLng.getLat();
            const current = new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng());
            that.clearOverlays(that.markersArray);
            var marker = new qq.maps.Marker({
              position: current,
              map: map,
            });
            //调用城市经纬度查询接口实现经纬查询
            var latLng = new qq.maps.LatLng(latitudeR, longitudeR);
            // const cityR = that.geocoder1.getAddress(latLng);
            that.wxGetTxMapByLatLng(latLng.lat, latLng.lng, (res)=>{
              let result = res.result
              console.log(result.location)
              map.setCenter(new qq.maps.LatLng(result.location.lat, result.location.lng));
              /*获取地址*/
              /*省*/
              const province1 = result.address_component.province == undefined ? "" : result.address_component.province;
              /*市*/
              const city1 = result.address_component.city == undefined ? "" : result.address_component.city;
              /*区*/
              const area1 = result.address_component.district == undefined ? "" : result.address_component.district;
              /*街道*/
              that.town = result.address_component.town == undefined ? "" : result.address_component.town;
              /*具体*/
              that.street = result.address_component.street == undefined ? "" : result.address_component.street;
              that.streetNumber = result.address_component.streetNumber == undefined ? "" : result.address_component.streetNumber;
              const street1 = that.town + that.street + that.streetNumber;

              const addressComponents1 = province1 + city1 + area1 + street1;
              var marker = new qq.maps.Marker({
                map: map,
                position: new qq.maps.LatLng(result.location.lat, result.location.lng)
              });
              info.open();
              info.setContent('<div style="text-align:center;white-space:nowrap;' + '">' +
                addressComponents1 +
                '</div>');
              info.setPosition(marker.getPosition());

              /*调整视图*/
              map.zoomTo(30);
              that.markersArray.push(marker);

              that.setMapData(result.location.lat, result.location.lng, province1, city1, area1, street1, addressComponents1, function() {
                qq.maps.event.addListener(
                  marker,
                  'click',
                  function(evt) {
                    console.log('点击了图标，隐藏图标');
                    that.clearOverlays(that.markersArray);
                  });
                that.form.province = province1;
                that.form.city = city1;
                that.form.area = area1;
                that.form.street = street1;
                that.form.storeAddress = addressComponents1;
                that.form.longitude = result.location.lng;
                that.form.latitude = result.location.lat;
                that.$refs.provinceId.focus();
                that.$refs.cityId.focus();
                that.$refs.areaId.focus();
                that.$refs.streetId.focus();
              });
            });
            that.markersArray.push(marker);
            // that.setMapData(longitudeR, latitudeR, null, city1, null, null, null, function() {
            //   console.log('右击显示遮盖物, 调用城市经纬度查询接口实现经纬查询:');
            //   console.log(that.form);
            //   qq.maps.event.addListener(
            //     marker,
            //     'click',
            //     function(evt) {
            //       console.log('点击了图标，隐藏图标');
            //       that.clearOverlays(that.markersArray);
            //     });
            //   that.form.longitude = longitudeR;
            //   that.form.latitude = latitudeR;
            //   that.form.city = city1;
            //   that.$refs.lngId.focus();
            //   that.$refs.latId.focus();
            //   that.$refs.cityId.focus();
            // });
          });
        }, 2000);
      })
    },
    methods: {
      wxGetTxMapgGeocoderByAddress(address, call){
        requestCrm({
            url:'WxService?method=wxGetTxMapgGeocoderByAddress',
            method: 'post',
            data: {
              address
            }
        }).then(res=>{
            if(call){
                call(res.data)
            }
        })
      },
      wxGetTxMapByLatLng(lat, lng, call){
        requestCrm({
            url:'WxService?method=wxGetTxMapByLatLng',
            method: 'post',
            data: {
              lat, lng
            }
        }).then(res=>{
            if(call){
                call(res.data)
            }
        })
      },
      startLoading: function() {
        const that = this;
        that.myLoadingObj = Loading.service({
          lock: true,
          text: '地图加载中...',
          background: 'rgba(0, 0, 0, 0.7)'
        })
      },
      endLoading: function() {
        this.myLoadingObj.close();
      },
      setMapData(longitude, latitude, province, city, area, street, addressComponents, callback) {
        const that = this;
        that.$nextTick(function() {
          if (longitude) {
            that.$set(that.form, 'longitude', longitude);
          }
          if (latitude) {
            that.$set(that.form, 'latitude', latitude);
          }
          if (province) {
            that.$set(that.form, 'province', province);
          }
          if (city) {
            that.$set(that.form, 'city', city);
          }
          if (area) {
            that.$set(that.form, 'area', area);
          }
          if (street) {
            that.$set(that.form, 'street', street);
          }
          if (addressComponents) {
            that.addressComponents = addressComponents;
            that.$set(that.form, addressComponents);
          }
          if (callback) {
            callback()
          }
        })
      },
      keyDown(ev) {
        /*回车搜索*/
        if (ev.keyCode == 13) {
          this.searchKeyword();
        }
      },
      searchKeyword() {
        let that = this
        /*点击搜索按钮搜索地图*/
        const keyword = document.getElementById("keyword").value;
        this.clearOverlays(this.markersArray);
        //对指定地址进行解析
        // this.geocoder.getLocation(keyword);
        this.wxGetTxMapgGeocoderByAddress(keyword, (pres)=>{
          if(pres){
            that.wxGetTxMapByLatLng(pres.result.location.lat, pres.result.location.lng, (res)=>{
                let result = res.result
                that.map.setCenter(new qq.maps.LatLng(result.location.lat, result.location.lng));
                /*获取地址*/
                /*省*/
                const province = result.address_component.province == undefined ? "" : result.address_component.province;
                /*市*/
                const city = result.address_component.city == undefined ? "" : result.address_component.city;
                /*区*/
                const area = result.address_component.district == undefined ? "" : result.address_component.district;
                /*街道*/
                that.town = result.address_component.town == undefined ? "" : result.address_component.town;
                /*具体*/
                that.street = result.address_component.street == undefined ? "" : result.address_component.street;
                that.streetNumber = result.address_component.streetNumber == undefined ? "" : result.address_component.streetNumber;
                const street = that.town + that.street + that.streetNumber;

                const addressComponents = province + city + area + street;

                /*调整视图*/
                that.map.zoomTo(30);
                // that.markersArray.push(marker);
                that.setMapData(null, null, province, city, area, street, addressComponents, function() {
                  console.log('地址解析 Geocoder:');
                  console.log(that.form);
                  that.form.province = province;
                  that.form.city = city;
                  that.form.area = area;
                  that.form.street = street;
                  that.form.storeAddress = addressComponents;
                  that.$refs.provinceId.focus();
                  that.$refs.cityId.focus();
                  that.$refs.areaId.focus();
                  that.$refs.streetId.focus();
                });
            })
          }
        })
        
      },
      clearOverlays(markersArray) {
        if (markersArray && markersArray.length > 0) {
          for (const i in markersArray) {
            markersArray[i].setMap(null)
          }
          markersArray.length = 0
        }
      },
      /** 提交按钮 */
      submitForm: function() {
        const that = this;
        if (!that.loading) {
          that.$refs["form"].validate(valid => {
            if (valid) {
              if (that.form.id != undefined) {
                that.form.updateBy = that.$store.state.user.name || '';
                that.loading = true;
                updateStoreBasics(that.form).then(response => {
                  if (response.code === 200) {
                    that.msgSuccess("修改成功");
                    that.open = false;
                    that.closeSelectedTag(that.$route);
                  }
                  that.loading = false;
                });
              } else {
                that.form.createBy = that.$store.state.user.name || '';
                that.loading = true;
                addStoreBasics(that.form).then(response => {
                  if (response.code === 200) {
                    that.msgSuccess("新增成功");
                    that.open = false;
                    that.closeSelectedTag(that.$route);
                  }
                  that.loading = false;
                });
              }
            }
          });
        }
      },
      isActive(route) {
        return route.path === this.$route.path
      },
      closeSelectedTag(view) {
        this.$store.dispatch('tagsView/delView', view).then(({
          visitedViews
        }) => {
          if (this.isActive(view)) {
            this.toLastView(visitedViews, view)
          }
        })
      },
      toLastView(visitedViews, view) {
        const latestView = visitedViews.slice(-1)[0]
        if (latestView) {
          this.$router.push(latestView.fullPath)
        } else {
          if (view.name === 'Dashboard') {
            this.$router.replace({
              path: '/redirect' + view.fullPath
            })
          } else {
            this.$router.push('/')
          }
        }
      },
      getStoreBasicsInfo(id, call) {
        if (id != "new") {
          getStoreBasics(id).then(response => {
            console.log('详情:');
            console.log(response);
            this.form = response.data
            this.title = "修改门店基础信息"
            if (call) {
              call();
            }
          })
        } else {
          this.title = "新增门店基础信息";
          if (call) {
            call();
          }
        }
      },
    }
  }
</script>

<style>
  .editor-content .quill-editor.editor {
    height: 500px
  }

  .form-btn-bar {
    margin-top: 30px;
    text-align: center;
  }

  /*搜索框*/
  .search {
    width: 100%;
  }

  .input-group {
    position: relative;
    display: table;
    border-collapse: separate;
  }

  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
  }

  .form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }

  .input-group .form-control:first-child,
  .input-group-addon:first-child,
  .input-group-btn:first-child>.btn,
  .input-group-btn:first-child>.btn-group>.btn,
  .input-group-btn:first-child>.dropdown-toggle,
  .input-group-btn:last-child>.btn-group:not(:last-child)>.btn,
  .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .input-group .form-control,
  .input-group-addon,
  .input-group-btn {
    display: table-cell;
  }

  .input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
  }

  button,
  input,
  select,
  textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    margin: 0;
    font: inherit;
    color: inherit;
  }

  .input-group .form-control.getAddress {
    width: 85%;
  }

  .searchBtn {
    width: 15%;
    float: right;
    border-radius: 0 4px 4px 0;
    background: #dca131;
    color: #fff;
  }

  /*提示语*/
  .prompt {
    color: #e84720;
    font-size: 14px;
    font-family: '微软雅黑';
    margin: 5px 10px;
  }

  .validate {
    position: absolute;
    bottom: 10px;
    right: 20px;
    color: #e84720;
  }

  .test {
    display: inline-block;
    width: 20px;
    height: 10px;
    background: rgba(239, 194, 192, 0.38);
  }

  /*地图*/
  .map {
    padding: 10px 30px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 20px;
  }

  #containerMap {
    margin: 10px auto;
    width: 100%;
    min-height: 470px;
  }

  /*经纬度设置*/
  .latLng {
    text-align: center;
    margin: 20px auto;
  }

  .latlngSpan {
    font-size: 16px;
  }

  .latlngInput {
    width: 200px;
    height: 25px;
    outline: none;
    background: #fff;
  }
</style>
